<template>
  <div>
    <el-row class="th">
      <span class="title">我的分享</span>
      <span class="loadtips" style="float: right">{{ loadedtips }}</span>
    </el-row>

    <el-table :data="rows" @current-change="onCurrentChange" :expand-row-keys="expandRowKeys" row-key="id" highlight-current-row style="width: 100%">
      <el-table-column type="expand" width="40">
        <template #default="props">
          <p>
            <span>链接：</span>
            <a :href="props.row.link" target="_blank">{{ props.row.link }}</a>
            <span v-if="props.row.protected" style="margin-left: 20px">提取码：{{ props.row.secret }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称">
        <template #default="scope">
          <el-icon v-if="scope.row.dirType==1"><component is="el-icon-folder"  style="color: #ffc402"></component></el-icon>
          <el-icon v-else><component is="el-icon-document"></component></el-icon>
          <span class="matter-title">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="created" label="分享时间">
        <template #default="scope">{{ scope.row.created}}</template>
      </el-table-column>
      <el-table-column prop="expired" label="失效时间">
        <template #default="scope">
          <span v-if="isForever(scope.row.expire_at)">永久有效</span>
          <span v-else>{{ scope.row.expire_at }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" type="text" @click="onDelete(scope.$index, scope.row)">取消分享</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import shareData from '@/data/share.js'
export default {
  data() {
    return {
      rows: [],
      total: 0,
      expandRowKeys: [],
    };
  },
  computed: {
    loadedtips() {
      let loadedNum = this.rows.length;
      if (loadedNum == this.total) {
        return `已全部加载，共${this.total}个`;
      }

      return `已加载${loadedNum}个，共${this.total}个`;
    },
  },
  methods: {
    isForever(expireAt) {
      return new Date(expireAt).getFullYear() - new Date().getFullYear() > 10;
    },
    listRefresh() {
      console.log(shareData)
      this.rows=shareData;
      this.total=shareData.length;
      console.log(this.rows)
      // let host = window.location.host;
      // this.$zpan.Share.list().then((ret) => {
      //   let data = ret.data;
      //   this.rows = data.list.map((item) => {
      //     item.link = `http://${host}/s/${item.alias}`;
      //     return item;
      //   });
      //   this.total = data.total;
      // });
    },
    onDelete(index, row) {
      this.$confirm("取消分享后，该条分享记录将被删除，好友将无法再访问此分享链接。 您确认要取消分享吗？", "取消分享", {
        type: "warning",
        confirmButtonText:"确认",
        cancelButtonText: "取消",
      }).then(() => {
        this.$message({
            type: "success",
            message: "取消成功",
          });
        this.listRefresh();

        // this.$zpan.Share.remove(row.alias).then((ret) => {
        //   this.$message({
        //     type: "success",
        //     message: this.$t("msg.cancel-success"),
        //   });
        //   this.listRefresh();
        // });
      });
    },
    onCurrentChange(currentRow, oldCurrentRow) {
      this.expandRowKeys = [currentRow.id];
    },
  },
  mounted() {
    this.listRefresh();
  },
};
</script>

<style scoped>
.th {
  font-size: 12px;
  color: #333;
  padding-top: 5px;
}

.matter-icon {
  font-size: 28px;
}

.matter-title {
  display: inline;
  margin-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: -4px;
  position: relative;
}
</style>